
<head>
	<style type="text/css" media="screen">@import "../jqt/jqtouch.css";</style>
	<style type="text/css" media="screen">@import "../jqt/theme.css";</style>
	<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../jqt/jqtouch.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css" media="screen">
		body > * {
			background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(144, 124, 250)), to(rgb(44, 104, 151)))
		}
		ul li {
			background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(44, 94, 250)), to(rgb(70, 94, 101)))
		}
		ul li .active {
			background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(44, 94, 250)), to(rgb(70, 94, 250)))
			
		}
		.toolbar {
			background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(11, 24, 42)), to(rgb(70, 94, 250)))
		}
	</style>
	<script type="text/javascript" charset="utf-8">
		var jQT = new $.jQTouch({});
	</script>
</head>
<body>
	<div id="example" class="current">
		<ul class="rounded">
			<li><a href="#one">Page 1</a>
			<li><a href="#two">Page 2</a>
		</ul>
	</div>
	<div id="one">
		<div class="toolbar">
			<h1>Page 1</h1>
			<a class="back">Back</a>
			<a class="add">+</a>
		</div>
		</ul>
		This is page one.
	</div>
	<div id="two">
		<ul>
			<li>This is another page. <a href="#three">go to page 3?</a></li>
	</div>
	<div id="three">
		<div class="toolbar">
			<h1>Page 3</h1>
			<a class="back">Back</a>
		</div>
		This is page 3.
	</div>

</body>